<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡特效</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div class="tabs">
        <!-- 选项卡按钮 -->
        <button class="tab-button active" onclick="openTab(event, 'Tab1')">选项1</button>
        <button class="tab-button" onclick="openTab(event, 'Tab2')">选项2</button>
        <button class="tab-button" onclick="openTab(event, 'Tab3')">选项3</button>
        <button class="tab-button" onclick="openTab(event, 'Tab4')">选项4</button>
        <button class="tab-button" onclick="openTab(event, 'Tab5')">选项5</button>
    </div>

    <!-- 选项卡内容 -->
    <div id="Tab1" class="tab-content active">
        <h2>选项1内容</h2>
        <p>这是选项1的内容。</p>
        <p><img src="images/1.png" alt=""></p>
    </div>
    <div id="Tab2" class="tab-content">
        <h2>选项2内容</h2>
        <p>这是选项2的内容。</p>
        <p><img src="images/2.png" alt=""></p>
    </div>
    <div id="Tab3" class="tab-content">
        <h2>选项3内容</h2>
        <p>这是选项3的内容。</p>
        <p><img src="images/3.png" alt=""></p>
    </div>
    <div id="Tab4" class="tab-content">
        <h2>选项4内容</h2>
        <p>这是选项4的内容。</p>
        <p><img src="images/4.png" alt=""></p>
    </div>
    <div id="Tab5" class="tab-content">
        <h2>选项5内容</h2>
        <p>这是选项5的内容。</p>
        <p><img src="images/5.png" alt=""></p>
    </div>

    <script src="js/script.js"></script>
</body>
</html>